<template>
  <div class="goodsList">
    <goodsListNav></goodsListNav>
    <loading v-if="list.length == 0"></loading>

    <van-list
      v-else
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
    >
      <div class="item" v-for="item in list" :key="item.id">
        <div class="left">
          <img @click="getDetail(item.id)" :src="item.pic" />
        </div>
        <div class="right">
          <h3>
            <img src="@/assets/img/1.png" alt="" />
            <span>{{ item.d_title | mysub(12) }}</span>
          </h3>
          <div class="produce">
            <div class="price">
              <span>劵后&nbsp;</span>
              <span class="rmb">￥{{ item.jiage }}</span>
            </div>
            <div class="label">已售{{ item.xiaoliang }}</div>
            <div class="shop">
              <span class="imit">{{ item.shop_name }}</span>
              <span class="in">进店</span>
              <i class="iconfont icon-youjiantou"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
    </van-list>
  </div>
</template>

<script>
import "@/assets/icons/iconfont.css";
import { getQinList } from "@/api/list";
import goodsListNav from "./goodsListNav.vue";
export default {
  components: {
    goodsListNav,
  },
  data() {
    return {
      finished: false,
      loading: false,
      list: [],
    };
  },
  /*   methods: {
    @load="onLoad"
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  }, */
  async mounted() {
    let ret = await getQinList();
    // this.list = [...this.list, ...ret.data.content];
    this.list = ret.data.content;
    console.log(this.list);

    console.log(ret);
  },
  methods: {
    getDetail(id) {
      console.log(id);
      if (id > 0) {
        this.$router.push("/detail/" + id);
    }
  },
}
}
</script>

<style lang="scss" scoped>
.goodsList {
  margin-top: 260px;
  height: 40px;
  width: 100%;
  background-color: white;
  border-bottom: 1px solid #d8d6d6;

  .item {
    height: 135px;
    margin-top: 15px;
    padding-bottom: 15px;
    display: flex;
    color: #797d82;
    font-size: 13px;
    border-bottom: 1px solid #ededed;

    .left {
      width: 77px;
      height: 100px;
      margin-left: 20px;
      img {
        width: 126px;
        height: 126px;
      }
    }

    .right {
      width: 218px;
      height: 135px;
      margin-left: 55px;
      h3 {
        margin-top: 8px;
        overflow: hidden;
        span {
          font-size: 14px;
          color: #333;
          margin-left: 2px;
        }
      }
      .produce {
        width: 218px;
        height: 78px;
        margin-top: 30px;
        margin-left: 5px;
        
        .price {
          .rmb {
            font-size: 18px;
            color: #ff2b22;
          }
        }
        .label {
          font-size: 14px;
          margin-top: 13px;
        }
        .shop {
          margin-top: 13px;
          .imit {
            font-size: 14px;
            margin-right: 5px;
          }
          .in {
            font-size: 14px;
            color: #333;
          }
          i {
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>